import * as echarts from 'echarts'
import { onMounted, watch, computed, watchEffect } from 'vue'
import { chartResize } from '@/views/dataBoard/compNew/ut';
import { observeResize } from '../compNew/useObserveResize';

const colors = ['#246CF9', '#DE7710','#a64bb5','#11CABE', '#006954', '#CF8C00']
const Comp = (props: any) => {
  const { id, data, key, yname, } = props;
  watchEffect(
    () => {
      const _data = data[key]
      const myChart = echarts.init(document.getElementById(id) as any)
      if (_data) {
        const option = {
          gird: {
            top: 50
          },
          title: {
              left: 'center',
              top: 'center',
               text: '生产综合\n成本占比',
               textStyle: {
                   color: '#ffffff',
                   fontSize: 12,
               }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            show: false
          },
            color: colors,
          series: [
           {
              radius: ['40%', '65%'],
              center: ['50%', '50%'],
              name: '',
              type: 'pie',
              label: {
                formatter: '{b}：{d}%'
            },
            labelLine: {
              show: true,
              showAbove: false,
              length: '6',
              // length2: '8%',
              smooth: true,
            },
              data: _data.map((item: any, index: any) => {
                return {
                  name: item.name,
                  value: item.value || 1,
                  label: {
                    color: colors[index % 6]
                  }
                }
              }),
            },
          ]
        };
        myChart.setOption(option)
      }
      observeResize('.board-container', () => {
        myChart.resize({
          animation: {
            duration: 300,
            easing: 'quadraticIn',
          },
        });
      });
      // chartResize(myChart);
    },
    {
      flush: 'post',
    },
  )
}

export default Comp
